<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
A `paper-menu-button` is a `paper-icon-button` that opens a drop down menu when tapped.

Example:

    <paper-menu-button icon="menu">
      <div>Menu Item 1</div>
      <div>Menu Item 2</div>
      <div>Menu Item 3</div>
    </paper-menu-button>

Theming
=======

To change the text color in the menu:

paper-menu-button::shadow #menu {
  color: white;
}

To change the overlay background color:

paper-menu-button::shadow .paper-menu-button-overlay-bg {
  background: green;
}

To change the color of the ripple effect:

paper-menu-button:shadow .paper-menu-button-overlay-ink {
 background: red;
}

@group Paper Elements
@element paper-menu-button
@extends paper-focusable
-->
<link href="../polymer/polymer.html" rel="import">

<link href="../core-dropdown/core-dropdown.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">
<link href="../core-style/core-style.html" rel="import">

<link href="../paper-focusable/paper-focusable.html" rel="import">
<link href="../paper-shadow/paper-shadow.html" rel="import">

<link href="paper-menu-button-transition.html" rel="import">

<core-style id="paper-menu-button">

.paper-menu-button-overlay-ink {
  background: {{g.paperMenuButton.background}}
}

.paper-menu-button-overlay-bg {
  background: {{g.paperMenuButton.background}}
}

</core-style>

<script src="paper-menu-button.js"></script>

<polymer-element name="paper-menu-button" extends="paper-focusable" attributes="src icon opened halign valign slow" on-tap="{{tapAction}}">
  <template>

    <link rel="stylesheet" href="paper-menu-button.css">
    <core-style ref="paper-menu-button"></core-style>

    <core-icon src="{{src}}" icon="{{icon}}"></core-icon>

    <core-dropdown id="dropdown" relatedTarget="{{}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" transition="{{noTransition ? '' : transition}}" on-core-transitionend="{{transitionEndAction}}">

      <paper-shadow id="shadow" z="1" target="{{$.dropdown}}"></paper-shadow>

      <div class="paper-menu-button-overlay-ink"></div>
      <div id="overlayBg" class="paper-menu-button-overlay-bg"></div>

      <div class="paper-menu-button-menu-container">
        <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{selectAction}}">
          <content></content>
        </core-menu>
      </div>

    </core-dropdown>

  </template>
  <script src="paper-menu-button-1.js"></script>
</polymer-element>
